<template>
	<view>
		<uni-zt-search 
			:is-focus="false" 
			:theme="themeClass" 
			:show-want="isShowWant" 
			:showHotList="ishotList"
			:hot-list="hotList"
			@getSearchText="getSearchText">
		 </uni-zt-search>
		 
		 
		 <template v-if="searchList.length > 0">
			<scroll-view 
			scroll-y="true" 
			class="searchScroll" 
			:style="{ height:scrollHeight+'px' }"
			@scrolltolower="scrolltolower"
			>
				<view class="guess-section">
					<block v-for="(item, index) in searchList" :key="index">
						<view
							class="guess-item"
							@click="navToDetailPage(item)"
						>
							<view class="image-wrapper">
								<image :src="item.primary_img" mode="aspectFill" lazy-load></image>
							</view>
							<text class="title clamp">{{item.product_name}}</text>
							<text class="price">￥{{item.sale_price}}</text>
						</view>
					</block>
				</view>
				<!-- 加载更多 -->
				<uni-load-more :status="loadMore"></uni-load-more>
			</scroll-view>
		 </template>
	</view> 
</template>

<script>
	export default {
		data() {
			return {
				loadMore:"more",
				isShowWant:true,  //是否显示推荐
				ishotList:true,
				themeClass: 'circle',
				hotList: ['牛奶','水果','纸巾','调味剂'],	//初始化推荐列表
				searchList:[],
				scrollHeight:500
			}
		},
		onShow() {
			uni.getSystemInfo({
			    success: (res) => {
					this.scrollHeight = res.windowHeight - uni.upx2px(100);
			    }
			});
		},
		methods: {
			navToDetailPage(item){
				uni.navigateTo({
					url: '../product/product'
				});
			},
			scrolltolower(){
				this.loadMore = "loading"
				setTimeout(()=>{
					for (let i = 0; i < 5; i++) {
						this.searchList.push({
							primary_img:"http://pic3.womai.com/upload/601/603/606/6900/6907/645156/645156_1_pic1242_3880.jpg",
							product_name:"香蕉",
							sale_price:'1221'
						});
					}
					this.loadMore = "more"
				},600)
			},
			getSearchText(d) {
				let data = [
					{
						primary_img:"http://pic3.womai.com/upload/601/603/606/6900/6907/645156/645156_1_pic1242_3880.jpg",
						product_name:"香蕉",
						sale_price:'1221'
					},
					{
						primary_img:"http://pic3.womai.com/upload/601/603/606/6900/6907/645156/645156_1_pic1242_3880.jpg",
						product_name:"香蕉",
						sale_price:'1221'
					},
					{
						primary_img:"http://pic3.womai.com/upload/601/603/606/6900/6907/645156/645156_1_pic1242_3880.jpg",
						product_name:"香蕉",
						sale_price:'1221'
					},
					{
						primary_img:"http://pic3.womai.com/upload/601/603/606/6900/6907/645156/645156_1_pic1242_3880.jpg",
						product_name:"香蕉",
						sale_price:'1221'
					},
					{
						primary_img:"http://pic3.womai.com/upload/601/603/606/6900/6907/645156/645156_1_pic1242_3880.jpg",
						product_name:"香蕉",
						sale_price:'1221'
					}
				]
				setTimeout(()=>{
					this.searchList = data;
					this.isShowWant = !this.isShowWant;
					this.ishotList = !this.ishotList;
				},600)
				// console.log(d);
				// uni.showToast({
				// 	title:'回调的搜索信息: ' + d,
				// 	icon:"none"
				// })
			}
		}
	}
</script>

<style lang="scss">
	.searchScroll{
		margin-top: 20rpx;
		padding-bottom: 10rpx;
	}
	.guess-section{
		display: flex;
		flex-wrap: wrap;
		padding: 0 30upx;
		background: #fff;
		.guess-item{
			display:flex;
			flex-direction: column;
			width: 48%;
			padding-bottom: 40upx;
			&:nth-child(2n+1){
				margin-right: 4%;
			}
		}
		.image-wrapper{
			width: 100%;
			height: 330upx;
			border-radius: 3px;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}
		.title{
			font-size: $font-lg;
			color: $font-color-dark;
			line-height: 80upx;
		}
		.price{
			font-size: $font-lg;
			color: $uni-color-primary;
			line-height: 1;
		}
	}
</style>
